<template>
  <div class="goods">
    <!-- --1.搜索区域 -->
    <div class="header">
      <!-- 仅在输入框失去焦点或用户按下回车时触发 -->
      <el-input @change='searchInp' v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary"><router-link to='/add-goods' style="color:#fff" >页面添加</router-link></el-button>
      <el-button type="primary" @click="addGoods" >弹窗添加</el-button>
    </div>
    <!-- --2.表格展示区域 -->
    <div class="wrapper">
      <template>
        <el-table :data="tableData" style="width: 100%" border>
             <el-table-column type="selection"   width="55"></el-table-column>
          <el-table-column prop="cid" label="商品ID" width=""></el-table-column>
          <el-table-column prop="title"  label="商品名称" width="" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="price" label="商品价格" width=""></el-table-column>
          <el-table-column prop="num" label="商品数量" width=""></el-table-column>
          <el-table-column prop="category" label="规格类目" width=""></el-table-column>
          <el-table-column prop="image" label="商品图片" show-overflow-tooltip width=""></el-table-column>
          <el-table-column prop="sellPoint" label="商品卖点" width=""></el-table-column>
          <el-table-column prop="descs" label="商品描述" width="" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="" label="操作" width="150">     
      <template slot-scope="scope">
        <el-button   size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button   size="mini" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template></el-table-column>
        </el-table>
      </template>
    </div>
    <!-- --3.分页 -->
    <Mypag :total="total" 
           :pageSize="pageSize" 
           :currentPage="currentPage"
           @handleCurrentChange="handleCurrentChange">
    </Mypag>
    <!-- --4.显示弹窗组件 :dialogVisible='dialogVisible'-->
    <GoodsDialog :dialog-visible.sync="dialogVisible"></GoodsDialog>
  </div>
</template>

<script>
import GoodsDialog from '../Goods/GoodsDialog.vue'
import Mypag from '@/components/MypaginationIndex.vue'
export default {
  components: { Mypag, GoodsDialog },
  data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
      type: 1,
      list: [],
      currentPage: 1, // 选中的页码
      dialogVisible: false
    };
  },
  methods: {
    // 添加商品--出现得弹窗
    addGoods() {
      this.dialogVisible = true;
    },
    // 分页页码
    handleCurrentChange(num) {
      // 小错误分页高亮同步
      this.currentPage = num;
      if (this.type === 1) {
        this.http(num); // 商品分页
      } else {
        // 搜索分页 1 2 3 4 list=[0,1,2,3,4,5,6,7,8] 0-3 3-6 6-9 9-12
        console.log('--搜索的分页处理--');
        // (num - 1) * 3 num * 3
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
    // 搜索查询数据
    // 定义搜索查询数据的方法，接收一个参数 val 作为搜索关键词
    searchInp(val) {
      // 判断如果取反则返回最初的数据
      if (!val) {
        this.http(1);
        return;
      }
      // 调用 $api 对象的 getSearch 方法发起搜索请求，传递一个包含 search 字段的对象，其值为搜索关键词 val
      // 打印搜索结果数据，方便调试查看
      this.$api.getSearch({ search: val }).then(res => {
        console.log('--搜索--', res.data);
        // 分页的值初始话回来为一，04商品-分页功能
        this.currentPage = 1;
        // 判断响应数据中的 status 字段是否等于 200，表示搜索成功
        if (res.data.status === 200) {
          // 如果搜索成功，将响应数据中的 result 字段赋值给 tableData，用于更新表格数据 这是获取后端的token值
          this.list = res.data.result; // 获取的搜索的总条数--数据分割
          // 假设没有分页 我们处理分页
          this.total = res.data.result.length;
          this.pageSize = 3;
          this.tableData = res.data.result.slice(0, 3);
          this.type = 2;
        } else {
          // 如果搜索失败，将 tableData 置为空数组，清空表格数据
          this.tableData = [];
          this.total = 1;
          this.pageSize = 1;
          this.type = 1;
        }
      });
    },
    // 编辑操作
    handleEdit() {

    },
    // 删除操作
    handleDelete() {

    },
    // 分页操作

    // 封装起来的了 商品列表的获取  分页
    http(page) {
      // 第一次进
      this.$api.getGoodsList({ page }).then(res => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.tableData = res.data.data; // 数据列表 
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        }
      });
    }
  },
  // 生命周期函数
  created() {
    this.http(1);
  }
};
</script>

<style lang="less" scoped>
.goods {
  margin: 20px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px 0;
}
</style>